<template>
    <div class="header column">
        <div class="title">{{ state.title }}</div>
        <div class="infomation"> {{ userInfos.code }} -- {{ userInfos.name }}</div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { storeToRefs } from 'pinia';
import { useUserInfo } from '@/stores/userInfo';

const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const state = reactive({
    title: 'header',
})
</script>

<style scoped lang="scss">
    .header {
        height: 100px;
        background-color: linear-gradient(to right, yellow, skyblue);
    }
</style>